<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<title></title>
	</head>
	<body>
		<!-- 
			作业：
				任选一套 
					https://www.qifeiye.com/%e5%93%8d%e5%ba%94%e5%bc%8f%e7%bd%91%e7%ab%99%e6%a8%a1%e6%9d%bf-%e5%93%8d%e5%ba%94%e5%bc%8f%e6%a8%a1%e6%9d%bf-h5%e6%a8%a1%e6%9d%bf/
		-->
		
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box{
				width: 50px;
				height: 50px;
				background: palegreen;
			}
			.box:hover{
				animation: zhuan 2s infinite linear;
			}
			@keyframes zhuan{
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
		</style>
		<div class="box"></div>
		
		<header>
			<div id="pc-header" class="hidden-xs">pc端的导航</div>
			<div id="m-header" class="visible-xs">移动端导航</div>
		</header>
		<div class="cate2">
			<div class="container2">
				<div class="row">
					<div class="col-xs-6 col-lg-3">1</div>
					<div class="col-xs-6 col-lg-3">2</div>
					<div class="col-xs-6 col-lg-3">3</div>
					<div class="col-xs-6 col-lg-3">4</div>
				</div>
			</div>
		</div>
		<div class="compay2">
			<div class="container2">
				<div class="row">
					<div class="col-xs-12 col-lg-6">1</div>
					<div class="col-xs-12 col-lg-6">2</div>
				</div>
			</div>
		</div>
		<footer></footer>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</body>
</html>
